<template>
  <a-modal
    :title="title"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 85%;overflow-y: hidden">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" v-bind="layout" :model="model" :rules="validatorRules">
        <a-form-model-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname">
          <a-input placeholder="请输入用户姓名" v-model="model.realname"/>
        </a-form-model-item>
        <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
          <a-input placeholder="请输入邮箱" v-model="model.email"/>
        </a-form-model-item>

        <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
          <a-input placeholder="请输入手机号码" v-model="model.phone"/>
        </a-form-model-item>
        <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="avatar">
          <div class="user-info-head" @click="editCropper(model)">
            <img v-if="model.avatar!=null" v-bind:src="model.avatar" title="点击上传头像" class="img-circle img-lg"/>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-spin>

    <el-dialog :visible.sync="open1" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
      <el-row>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <vue-cropper
            ref="cropper"
            :img="options.img"
            :info="true"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            @realTime="realTime"
            v-if="displayed"
          />
        </el-col>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <div class="avatar-upload-preview">
            <img :src="previews.url" :style="previews.img"/>
          </div>
        </el-col>
      </el-row>
      <br/>
      <el-row>
        <el-col :lg="2" :md="2">
          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :on-success="handleAvatarSuccess"
                     :before-upload="beforeUploads">
            <el-button size="small">
              选择
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
        </el-col>
        <el-col :lg="{span: 1, offset: 2}" :md="2">
          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
        </el-col>
        <el-col :lg="{span: 2, offset: 6}" :md="2">
          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </a-modal>
  <UserMenu ref="UserMenu"/>
</template>

<script>
  import Vue from 'vue';
  import {VueCropper} from "vue-cropper";
  import {getAction, putAction, UploadAvatar} from '@/api/manage'
  import {ordinaryEdit, duplicateCheck} from '@/api/api'
  import UserMenu from './UserMenu'

  export default {
    name: "PersonalInformation",
    components: {
      VueCropper, UserMenu
    },
    data() {
      return {
        userId: "", //保存用户id
        userIds: "", //保存用户头像id
        // 是否显示弹出层
        open1: false,
        // 是否显示cropper
        displayed: false,
        // 弹出层标题
        s: 1, // 判断头像是否存在
        ss: [],
        imageUrl: "",
        username: "",
        options: {
          img: "", //裁剪图片的地址
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 200, // 默认生成截图框宽度
          autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true // 固定截图框大小 不允许改变
        },
        previews: {},
        result: {},

        title: "基本信息",
        modalWidth: 800,
        model: {},
        layout: {
          labelCol: {span: 3},
          wrapperCol: {span: 14},
        },
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        visible: false,
        confirmLoading: false,
        validatorRules: {
          realname: [{required: true, message: '请输入用户名称!'}],
          email: [{validator: this.validateEmail},
            {required: true, message: '请输入邮箱!'}],
        },
        url: "sys/user/list",
        username: "",
      }
    },

    methods: {
      // 编辑头像
      editCropper(form) {
        this.options.img = form.avatar
        console.info("-------this.options.img------" + JSON.stringify(this.options.img))
        this.userIds = form.id
        console.info("-------this.userId------" + JSON.stringify(this.userIds))
        this.open1 = true;
      },
      // 打开弹出层结束时的回调
      modalOpened() {
        this.displayed = true;
      },
      // 覆盖默认的上传行为
      requestUpload() {
      },
      // 向左旋转
      rotateLeft() {
        this.$refs.cropper.rotateLeft();
      },
      // 向右旋转
      rotateRight() {
        this.$refs.cropper.rotateRight();
      },
      // 图片缩放
      changeScale(num) {
        num = num || 1;
        this.$refs.cropper.changeScale(num);
      },
      // 上传预处理
      beforeUploads(file) {
        console.info("-------file------" + JSON.stringify(file.type))
        if (file.type.indexOf("image/") == -1) {
          this.$error("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          console.info("-------上传预处理------" + JSON.stringify(reader.result))
          reader.onload = () => {
            this.options.img = reader.result;
          };
        }
      },
      handleAvatarSuccess(res, file) {
        console.info("------file-----" + JSON.stringify(file))
        this.imageUrl = URL.createObjectURL(file.raw);
        console.info("-------this.imageUrl------" + JSON.stringify(this.imageUrl))
      },
      // 上传图片
      uploadImg() {
        this.model.avatar = this.previews.url
        this.$refs.cropper.getCropBlob(data => {
          this.ss = data;
          console.info("-------this.ss-----" + JSON.stringify(this.ss))
          this.uploadImgs(this.model.id);
        });
        this.open1 = false;
      },

      uploadImgs(userId) {
        const that = this;
        let formData = new FormData();
        formData.append("avatarfile", this.ss);
        console.info("-------form------" + JSON.stringify(userId))
        UploadAvatar(userId, formData).then(response => {
          console.info("-------response-----" + JSON.stringify(response))
          this.displayed = false;
          this.s = 1;
          if (response.code == 200) {
            // 发送事件
            this.$EventBus.$emit('dataModified', response.message);
            that.$message.success("上传成功");
          }
        });
      },

      // 实时预览
      realTime(data) {
        console.info("-------实时预览data------" + JSON.stringify(data))
        this.previews = data;
      },
      // 关闭窗口
      closeDialog() {
        this.displayed = false;
      },


      show(username) {
        if (!username) {
          this.$message.warning("当前系统无登录用户!");
          return
        } else {
          let params = {}
          params.username = username
          console.log("========params========" + JSON.stringify(params))
          getAction(this.url, params).then((res) => {
            if (res.success) {
              this.model = res.result.records[0];
              console.log("========this.model========" + JSON.stringify(this.model))
              this.visible = true;
            }
          })
        }
      },

      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },

      validateEmail(rule, value, callback) {
        if (!value) {
          callback()
        } else {
          if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
            var params = {
              tableName: 'sys_user',
              fieldName: 'email',
              fieldVal: value,
              dataId: this.userId
            };
            duplicateCheck(params).then((res) => {
              console.log(res)
              if (res.success) {
                callback()
              } else {
                callback("邮箱已存在!")
              }
            })
          } else {
            callback("请输入正确格式的邮箱!")
          }
        }
      },

      handleOk() {
        const that = this;
        // 触发表单验证
        that.confirmLoading = true;
        let obj;
        console.log("========this.model========" + JSON.stringify(this.model))
        obj = ordinaryEdit(this.model);
        obj.then((res) => {
          console.log("========res========" + JSON.stringify(res))
          if (res.success) {
            that.$message.success(res.message);
          } else {
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.confirmLoading = false;
          that.close();
        })
      },

    }


  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

  .img-circle {
    /*border-radius: 50%;*/
  }

  .img-lg {
    width: 90px;
    height: 90px;
  }

  .user-info-head {
    position: relative;
    display: inline-block;
    height: 90px;
  }

  .user-info-head:hover:after {
    content: '+';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #f0f2f5;
    background: rgba(0, 0, 0, 0.5);
    font-size: 24px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
    line-height: 90px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }

  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;
  }
</style>